<template>
  <div>
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input
          class="new-todo"
          autofocus
          autocomplete="off"
          placeholder="What needs to be done?"
          v-model="newTodo"
          @keyup.enter="addTodo"
        />
      </header>
      <section class="main" v-show="filteredTodos.length" v-cloak>
        <input class="toggle-all" type="checkbox" v-model="allDone" />
        <ul class="todo-list">
          <li
            v-for="todo in filteredTodos"
            class="todo"
            :key="todo.id"
            :class="{ completed: todo.completed, editing: todo == editedTodo }"
          >
            <div class="view">
              <input class="toggle" type="checkbox" v-model="todo.completed" />
              <label @dblclick="editTodo(todo)">{{ todo.value }}</label>
              <button class="destroy" @click="removeTodo(todo)"></button>
            </div>
            <input
              class="edit"
              type="text"
              v-model="todo.value"
              v-input-focus="todo == editedTodo"
              @blur="doneEdit(todo)"
              @keyup.enter="doneEdit(todo)"
              @keyup.esc="cancelEdit(todo)"
            />
          </li>
        </ul>
      </section>
      <footer class="footer" v-show="filteredTodos.length" v-cloak>
        <span class="todo-count">
          <strong>{{ remaining }}</strong> {{ singleOrMuch }} left
        </span>
        <ul class="filters">
          <li>
            <a @click="onClkActive('all')">All</a>
          </li>
          <li>
            <a @click="onClkActive('unfinished')">Active</a>
          </li>
          <li>
            <a @click="onClkActive('completed')">Completed</a>
          </li>
        </ul>
        <button class="clear-completed" @click="removeCompleted">
          Clear completed
        </button>
      </footer>
    </section>
  </div>
</template>

<script>
import { localStorageTodos, filters } from "./components/localstorage/";
export default {
  data() {
    return {
      todos: [],
      newTodo: "",
      visibility: "all",
      editedTodo: null,
      beforeUpdate: null,
    };
  },
  mounted() {
    this.todos = localStorageTodos.get();
  },
  methods: {
    // esc
    cancelEdit(todo) {
      todo.value = this.beforeUpdate;
      this.editedTodo = null;
    },
    // 修改
    doneEdit(todo) {
      let val = todo.value && todo.trim;
      if (!todo.value) {
        this.removeTodo(todo);
      }
      if (val) {
        todo.value = val;
      }
      this.editedTodo = null;
    },
    // 选择显示列表
    onClkActive(val) {
      this.visibility = val;
    },
    // 双击
    editTodo(todo) {
      this.editedTodo = todo;
      this.beforeUpdate = todo.value;
      console.log(this.beforeUpdate);
    },
    // 清除已完成项
    removeCompleted() {
      this.todos = this.todos.filter((v) => {
        if (!v.completed) {
          return v;
        }
      });
    },
    // 回车
    addTodo() {
      let val = this.newTodo && this.newTodo.trim();
      if (!val) {
        return;
      }
      this.todos.push({
        id: this.todos.length ? this.todos[this.todos.length - 1].id + 1 : 1,
        value: val,
        completed: false,
      });
      this.newTodo = "";
    },
    // 删除
    removeTodo(todo) {
      this.todos = this.todos.filter((v) => {
        return todo.id != v.id;
      });
    },
  },
  computed: {
    filteredTodos() {
      return filters[this.visibility](this.todos);
    },
    remaining() {
      return filters.unfinished(this.todos).length;
    },
    singleOrMuch() {
      return this.remaining > 1 ? "items" : "item";
    },
    allDone: {
      get() {
        return this.remaining == 0;
      },
      set(val) {
        this.todos = this.todos.map((v) => {
          return {
            ...v,
            completed: val,
          };
        });
      },
    },
  },
  watch: {
    todos: {
      handler(newVal) {
        localStorageTodos.save(newVal);
      },
      deep: true,
    },
  },
  directives: {
    "input-focus": {
      update(el, binding) {
        if (binding.value) {
          el.focus();
        }
      },
    },
  },
};
</script>

<style scoped>
</style>
<style>
[v-cloak] {
  display: none;
}
</style>